<template>
  <div class="table">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><i class="el-icon-menu"></i> 设备管理</el-breadcrumb-item>
        <el-breadcrumb-item>设备列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="handle-box" id="condition">
      <el-button type="primary" class="handle-del" @click="handleAdd()">销售登记</el-button>
      <el-select v-model="select_cate" placeholder="请选择" class="handle-select mr10">
        <el-option value="" label="全部" >全部</el-option>
        <el-option
          v-for="item in provinces"
          :label="item"
          :value="item">
        </el-option>
      </el-select>
      <el-input v-model="select_word" placeholder="筛选关键词" class="handle-input mr10"></el-input>
      <el-button type="primary" icon="search" @click="search">搜索</el-button>
    </div>
    <el-table :data="tableData" border style="width: 100%" ref="multipleTable"
              @selection-change="handleSelectionChange">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="机器编号">
              <span>{{ props.row.machineCode }}</span>
            </el-form-item>
            <el-form-item label="版本">
              <span>{{ props.row.softVersion }}</span>
            </el-form-item>
            <el-form-item label="省份">
              <span>{{ props.row.province }}</span>
            </el-form-item>
            <el-form-item label="城市">
              <span>{{ props.row.city }}</span>
            </el-form-item>
            <el-form-item label="客户姓名">
              <span>{{ props.row.customerName }}</span>
            </el-form-item>
            <el-form-item label="联系方式">
              <span>{{ props.row.telephone }}</span>
            </el-form-item>
            <el-form-item label="安装人员">
              <span>{{ props.row.installer }}</span>
            </el-form-item>
            <el-form-item label="安装时间">
              <span>{{ props.row.installTime }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column prop="id" label="id" v-if="false">
      </el-table-column>
      <el-table-column prop="machineCode" label="机器编号" width="120">
      </el-table-column>
      <el-table-column prop="equipmentType" label="设备类型" width="120">
      </el-table-column>
      <el-table-column prop="softVersion" label="版本">
      </el-table-column>
      <el-table-column prop="province" label="省份">
      </el-table-column>
      <el-table-column prop="city" label="城市">
      </el-table-column>
      <el-table-column prop="customerName" label="客户姓名">
      </el-table-column>
      <el-table-column prop="telephone" label="联系方式">
      </el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button type="danger" size="small"
                     @click="handleDelete(scope.$index, scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        @current-change="handleCurrentChange"
        :page-size="size"
        layout="total, prev, pager, next"
        :total="count">
      </el-pagination>
    </div>

    <!--销售登记-->
    <el-dialog title="销售登记" width="60%" :visible.sync="dialogFormVisible" @close='closeDialog'>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
        <el-input type="hidden" v-model="ruleForm.id"></el-input>
        <el-row>
          <el-col :span="12">
            <el-form-item label="客户姓名" prop="customerName" :label-width="formLabelWidth">
              <el-input v-model="ruleForm.customerName" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="电话" prop="telephone" :label-width="formLabelWidth">
              <el-input v-model="ruleForm.telephone" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="地区" prop="selectedOptions" :label-width="formLabelWidth">
              <el-cascader
                size="large"
                :options="options"
                v-model="ruleForm.selectedOptions"
                @change="handleChange">
              </el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="详细地址" prop="address" :label-width="formLabelWidth">
              <el-input v-model="ruleForm.address" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备类型" prop="equipmentType" :label-width="formLabelWidth">
              <el-select v-model="ruleForm.equipmentType" placeholder="请选择" class="handle-select">
                <el-option value="手法仪">手法仪</el-option>
                <el-option value="腧穴仪">腧穴仪</el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="机器编号" prop="machineCode" :label-width="formLabelWidth">
              <el-input v-model="ruleForm.machineCode" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="出厂时间" prop="dateOfProduction" :label-width="formLabelWidth">
              <el-date-picker
                v-model="ruleForm.dateOfProduction"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="软件版本号" prop="softVersion" :label-width="formLabelWidth">
              <el-input v-model="ruleForm.softVersion" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="安装时间" prop="installTime" :label-width="formLabelWidth">
              <el-date-picker
                v-model="ruleForm.installTime"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="安装人员" prop="installer" :label-width="formLabelWidth">
              <el-input v-model="ruleForm.installer" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注" prop="remark" :label-width="formLabelWidth">
              <el-input type="textarea" v-model="ruleForm.remark"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addOrUpdateEquipment('ruleForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script type="text/ecmascript-6">
  import {provinceAndCityData, CodeToText, TextToCode} from 'element-china-area-data'
  import ElInput from "../../../node_modules/element-ui/packages/input/src/input.vue";
  import ElOption from "../../../node_modules/element-ui/packages/select/src/option.vue";

  export default {
    components: {
      ElOption,
      ElInput
    },
    data() {
      return {
        options: provinceAndCityData,
        tableData: [],
        cur_page: 1,
        count: 0,
        size: 10,
        multipleSelection: [],
        select_cate: '',
        provinces: [],
        select_word: '',
        dialogFormVisible: false,
        ruleForm: {
          id:'',
          customerName: '',
          telephone: '',
          selectedOptions:[],
          province: '',
          city: '',
          address: '',
          machineCode: '',
          softVersion: '',
          installer: '',
          installTime: '',
          equipmentType: '',
          dateOfProduction: '',
          remark: '',
        },
        rules: {
          customerName: [
            {required: true, message: '请输入联系人', trigger: 'blur'},
            {min: 2, max: 5, message: '长度在 2 到 5 个汉字', trigger: 'blur'}
          ],
          address: [
            {required: true, trigger: 'blur', message: '请输入详细地址',}//这里需要用到全局变量
          ],
          softVersion: [
            {required: true, trigger: 'blur', message: '请输入软件版本号',}//这里需要用到全局变量
          ],
          installer: [
            {required: true, trigger: 'blur', message: '请输入安装人员',}//这里需要用到全局变量
          ],
          installTime: [
            {required: true, trigger: 'blur', message: '请输入安装时间',}//这里需要用到全局变量
          ],
          equipmentType: [
            {required: true, trigger: 'blur', message: '请选择设备类型',}//这里需要用到全局变量
          ],
          dateOfProduction: [
            {required: true, trigger: 'blur', message: '请输入出厂时间',}//这里需要用到全局变量
          ],
          telephone: [
            {required: true, trigger: 'blur', message: '请输入联系电话',}//这里需要用到全局变量
          ],
          machineCode: [
            {required: true, trigger: 'blur', message: '请输入机器编号',}//这里需要用到全局变量
          ],
          selectedOptions: [
            {required: true, type: 'array', trigger: 'change', message: '请选择地区',}//这里需要用到全局变量
          ]

        },
        formLabelWidth: '100px'
      }
    },
    created() {
      this.search();
      this.getProvinceCity();
    },
    methods: {
      search(){
        this.getEquipemntList();
      },
      handleCurrentChange(value) {
        this.cur_page = value;
        this.getEquipemntList();
      },
      handleChange(value) {
        this.ruleForm.province = CodeToText[this.ruleForm.selectedOptions[0]];
        this.ruleForm.city = CodeToText[this.ruleForm.selectedOptions[1]];
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      handleAdd(){
        this.dialogFormVisible = true;
      },
      addOrUpdateEquipment(formName) {
        let self = this;
        let url = '/api/equipment/insertOrUpdate';
        self.$refs[formName].validate((valid) => {
          if (valid) {
            self.$axios({
              url: url,
              method: 'post',
              data: {
                'id': this.ruleForm.id,
                'customerName': this.ruleForm.customerName,
                'telephone': this.ruleForm.telephone,
                'province': this.ruleForm.province,
                'city': this.ruleForm.city,
                'address': this.ruleForm.address,
                'machineCode': this.ruleForm.machineCode,
                'softVersion': this.ruleForm.softVersion,
                'installer': this.ruleForm.installer,
                'installTime': this.ruleForm.installTime,
                'equipmentType': this.ruleForm.equipmentType,
                'dateOfProduction': this.ruleForm.dateOfProduction,
                'remark': this.ruleForm.remark,
              }
            }).then(function (response) {
              console.log(response);
              let result = response.data;
              if (result.status == "200") {
                self.$message({
                  type: 'success',
                  message: '操作成功!'
                });
                this.getEquipemntList();
              } else if (result.status == "400") {
                self.$message({
                  type: 'warning',
                  message: result.data
                });
              } else if (result.status == "500") {
                self.$message({
                  type: 'error',
                  message: '未知错误！'
                });
              }
            }).catch(function (error) {
              console.log(error);
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      getEquipemntList() {
        let self = this;
        self.$axios.get('/api/equipment/list', {
          params: {
            'current': self.cur_page,
            'size': self.size,
            'province':self.select_cate,
          }
        }).then(function (response) {
          let result = response.data;
          self.tableData = result.data;
          self.count = result.page.total;

        }).catch(function (error) {

        })
      },
      handleDelete(index, row) {
        let self = this;

        this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios.delete('/api/equipment/' + row.id).then(function (response) {
            let result = response.data;
            if (result.status == "200") {
              self.$message({
                type: 'success',
                message: '删除成功!'
              });
              self.tableData.splice(index, 1);
              self.getEquipemntList();
            } else if (result.status == "400") {
              self.$message({
                type: 'warning',
                message: '设备不存在!'
              });
            } else {
              self.$message({
                type: 'error',
                message: '未知错误！'
              });
            }
          }).catch(function (error) {
              console.log(error);
            });
        })

      },
      handleEdit(index, row) {
        let self = this;
        self.ruleForm = row;
        self.dialogFormVisible = true
        let province = TextToCode[row.province].code;
        let city = TextToCode[row.province][row.city].code;
        self.ruleForm.selectedOptions = [province,city];
      },
      getProvinceCity(){
        let self = this;
        self.$axios.get('/api/equipment/provinces').then(function (response) {
          let result = response.data;
          self.provinces = result;
        }).catch(function (error) {
          console.error(error);
        })
      },
      closeDialog() {
        this.ruleForm = {};
      }
    }
  }
</script>

<style scoped>

  #condition .handle-box {
    margin-bottom: 20px;
  }

  #condition .handle-select {
    width: 120px;
  }

  #condition .handle-input {
    width: 300px;
    display: inline-block;
  }

  .demo-table-expand {
    font-size: 0px;
  }

  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
